<template>
  <view class="container">
    <view class="search-box">
      <view class="search">
        <view class="filter">
          <text>项目名称</text>
          <nut-icon
            font-class-name="iconfont"
            class-prefix="iconfont"
            name=".icon-xialajiantou"
            size="16"
            color="#999999"
          />
        </view>
        <input class="input" type="text" placeholder="搜索" />
      </view>
    </view>
    <view class="state-box">
        <view class="filter">
          <text>全部状态</text>
          <nut-icon
            font-class-name="iconfont"
            class-prefix="iconfont"
            name=".icon-xialajiantou"
            size="16"
            color="#999999"
          />
        </view>
        <view class="sort">
          <text class="default">默认</text>
          <view class="blank"></view>
          <text class="active">最新</text>
        </view>
    </view>
    <view class="list">
      <view class="cell" @click="handleGo('/pages/project/project-list/detail/index')">
        <view class='top'>
          <text class="number">100182627</text>
          <view class="state">
            <text class="state-text">待提交</text>
            <nut-icon
              font-class-name="iconfont"
              class-prefix="iconfont"
              name=".icon-gengduo"
              size="16"
              color="#999999"
            />
          </view>
        </view>
        <view class='middle'>
          1111
          <!--  <view class="content">
            <text class="content-label">项目名称：</text>
            <text class="content-text">188888888888</text>
          </view>
          <view class="content">
            <text class="content-label">甲方名称：</text>
            <text class="content-text">太原市安盛泰物业管理有限公司</text>
          </view>
          <view class="content">
            <text class="content-label">项目地址：</text>
            <text class="content-text">山西省太原市迎泽区经园路</text>
          </view> -->
        </view>
        <view class="bottom">
          <img class="img" src="" alt="">
          <text class="text">审核：盖文超</text>
        </view>
      </view>
      <view class="cell">
        <view class='top'>
          <text class="number">100182627</text>
          <view class="state">
            <text class="state-text">待提交</text>
            <nut-icon
              font-class-name="iconfont"
              class-prefix="iconfont"
              name=".icon-gengduo"
              size="16"
              color="#999999"
            />
          </view>
        </view>
        <view class='middle'>
          1111
          <!--  <view class="content">
            <text class="content-label">项目名称：</text>
            <text class="content-text">188888888888</text>
          </view>
          <view class="content">
            <text class="content-label">甲方名称：</text>
            <text class="content-text">太原市安盛泰物业管理有限公司</text>
          </view>
          <view class="content">
            <text class="content-label">项目地址：</text>
            <text class="content-text">山西省太原市迎泽区经园路</text>
          </view> -->
        </view>
        <view class="bottom">
          <img class="img" src="" alt="">
          <text class="text">审核：盖文超</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script lang="ts">
import { reactive, toRefs, ref } from "vue";
import Taro from "@tarojs/taro";
export default {
  name: "project-list",
  components: {},
  setup() {
    const activeName = ref(1);
    const title = reactive({
      title1: "标题1",
      title2: "标题2",
      title3: "标题3",
    });
    const handleGo = (url: string) => {
      Taro.navigateTo({
        url: url,
      });
    };
    return {
      activeName,
      handleGo,
      ...toRefs(title),
    };
  },
};
</script>
<style lang="scss">
  .search-box{
    padding: 6px 16px;
    .search{
      width: 100%;
      background: #ffffff;
      height: 28px;
      border-radius: 16px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      
      .filter{
        padding: 0 8px 0 16px;
        font-size: 12px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        color: #333333;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        border-right: 1px solid #cccccc;
      }
      .input{
        flex: 1;
        font-size: 14px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        color: #cccccc;
        display: flex;
        justify-content: flex-start;
      }
    }
  }
  .state-box{
    padding: 12px 16px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    color: #333333;
    .filter{
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      color: #333333;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }
    .sort{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      .blank{
        width: 1px;
        height: 12px;
        background:  #cccccc;
        margin: 0 12px;
      }
      .active{
        color: #999999;
      }
    }
  }
  .list{
    padding: 0 12px;
    .cell{
      width: 100%;
      background: #ffffff;
      border-radius: 4px;
      margin-top: 8px;
      .top{
        padding: 0 16px;
        flex: 1;
        height:44px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        .number{
          font-size: 14px;
          font-family: PingFangSC, PingFangSC-Medium;
          font-weight: 500;
          color: #262626;
        }
        .state{
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          &-text{
            font-size: 12px;
            font-family: PingFangSC, PingFangSC-Regular;
            font-weight: 400;
            color: #dc2734; 
            padding: 0 8px;
          }
        }
      }
      .middle{
        padding: 6px 16px;
        border-top: 1px solid #eeeeee;
        border-bottom: 1px solid #eeeeee;
        .content{
          width: 100%;
          display: flex;
          flex-direction: row;
          align-items: center;
          padding: 4px 0;
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          line-height: 17px;
          &-label{
            color: #999999;
          }
          &-text{
            color: #666666;
          }
        }
      }
      .bottom{
        padding: 12px 16px;
        display: flex;
        flex-direction: row;
        align-items: center;
        .img{
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background: chartreuse;
          margin-right: 8px;
        }
        .text{
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          color: #666666;
          line-height: 18px;
        }
      }
    }
  }
</style>